<template>
  <div id="maintenance">
    <spin fix v-if="spinShow"></spin>
    <!--<iframe ref="maintenance" src="https://open.banchengyun.com/home/development/apiExamination" id="maintenance-content"></iframe>-->
    <div class="pannel-wrapper flex">
      <!--微信端 账户状态-->
      <div class="pannel-item shadow">
        <div class="pannel-title">微信端 账户状态</div>
        <div class="pannel-content">
          <Form name="wx-account" :label-width="120" :model="wechatInfo">
            <FormItem label="公众号 AppId">
              <Input
                readonly
                style="width: 90%;"
                type="text"
                v-model="wechatInfo.oa_appid"
                placeholder
              ></Input>
            </FormItem>
            <!-- <FormItem label="公众号 Token">
				            <Input readonly style="width: 90%;" type="textarea" v-model="wechatInfo.wechat_access_token" placeholder="">
				            </Input>
            </FormItem>-->
            <FormItem label="小程序 AppId">
              <Input
                readonly
                style="width: 90%;"
                type="text"
                v-model="wechatInfo.mp_appid"
                placeholder
              ></Input>
            </FormItem>
            <!-- <FormItem label="小程序 Token">
				            <Input readonly style="width: 90%;" type="textarea" v-model="wechatInfo.wechat_app_access_token" placeholder="">
				            </Input>
            </FormItem>-->
            <FormItem label="开放平台 AppId">
              <Input
                readonly
                style="width: 90%;"
                type="text"
                v-model="wechatInfo.open_appid"
                placeholder
              ></Input>
            </FormItem>
          </Form>
        </div>
      </div>

      <!--接口端 实时状态-->
      <div class="pannel-item shadow">
        <div class="pannel-title">接口端 实时状态</div>
        <div class="pannel-content">
          <Form name="wx-account" :label-width="120" :model="statusInfo">
            <FormItem label="公众号绑定状态">
              <div class="flex" :class="stateInfo.oa?'green':'red'">
                <div class="status-input">{{stateInfo.oa==1?"用户绑定正常":"用户绑定异常"}}</div>
              </div>
            </FormItem>
            <FormItem label="小程序绑定状态">
              <div class="flex" :class="stateInfo.mp?'green':'red'">
                <div class="status-input">{{stateInfo.mp?"用户绑定正常":"用户绑定异常"}}</div>
              </div>
            </FormItem>
            <FormItem label="微信支付状态">
              <div class="flex" :class="stateInfo.payment == true?'green':'red'">
                <div class="status-input">{{stateInfo.payment == true?"订单创建正常":stateInfo.payment}}</div>
              </div>
            </FormItem>
            <!-- <FormItem label="服务商API退款">
				            <div class="flex" :class="statusInfo.appRefundApi.status==1?'green':'red'">
				            	<div class="status-input">
				            		{{statusInfo.appRefundApi.status==1?"服务商API退款正常":"订单创建异常"}}
				            	</div>
				            </div>
            </FormItem>-->
            <FormItem label="企业付款到零钱">
              <div class="flex" :class="stateInfo.transfers?'green':'red'">
                <div class="status-input">{{stateInfo.transfers?"企业付款到零钱正常":"企业付款到零钱异常"}}</div>
              </div>
            </FormItem>
            <FormItem label="服务器请求域名">
              <Input readonly style="width: 60%;" type="text" v-model="stateInfo.domain.requestdomain" placeholder></Input>
            </FormItem>
            <FormItem label="服务器上传域名">
              <Input readonly style="width: 60%;" type="text" v-model="stateInfo.domain.uploaddomain" placeholder></Input>
            </FormItem>
            <FormItem label="服务器下载域名">
              <Input readonly style="width: 60%;" type="text" v-model="stateInfo.domain.downloaddomain" placeholder></Input>
            </FormItem>
            <!-- <FormItem label="业务安全域名">
              <div class="flex">
                <Input readonly style="width: 60%;" type="text" v-model="webviewdomain" placeholder></Input>
                <p
                  @click="tapWebviewReset"
                  class="reset-btn red"
                  v-if="webviewdomain==';'"
                >配置异常 戳我重置域名</p>
              </div>
            </FormItem> -->
          </Form>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { ApiInfo, ApiStatus } from "api/recuit/setting";

export default {
  data() {
    return {
      // 加载loading标识
      spinShow: true,
      // 微信端 账号信息
      wechatInfo: {
        // 公众号AppId
        oa_appid: "",
        // 小程序AppId
        mp_appid: "",
        // 开放平台AppId
        open_appid: ""
      },
      stateInfo: {
        mp: true,
        oa: true,
        payment: true,
        transfers: true,
        domain: {
          requestdomain: [],
          uploaddomain: [],
          downloaddomain: []
        }
      },
      // 接口端 实时状态
      statusInfo: {
        appRefundApi: {
          status: 1
        },
        appTransfers: {
          status: 1
        },
        miniprogramAccount0: {
          status: 1,
          data: {
            open_appid: ""
          }
        },
        miniprogramAccount1: {
          status: 1,
          data: {
            open_appid: ""
          }
        },
        miniprogramPay: {
          status: 1,
          data: {
            open_appid: ""
          }
        },
        miniprogramDomain: {
          requestdomain: [],
          uploaddomain: [],
          downloaddomain: []
        },
        miniprogramDomainWebview: {
          webviewdomain: []
        }
      }
    };
  },
  computed: {},
  methods: {
    getData() {
      this.spinShow = true;
      ApiInfo()
        .then(_res => {
          this.spinShow = false;
          this.wechatInfo = _res;
          ApiStatus()
            .then(result => {
              this.stateInfo = result;
              console.log(this.stateInfo.domain.requestdomain);
              this.stateInfo.domain.downloaddomain.length > 0 &&
                (this.domain(
                  "downloaddomain"
                ));
              this.stateInfo.domain.requestdomain.length > 0 &&
                (this.domain(
                  "requestdomain"
                ));
              this.stateInfo.domain.uploaddomain.length > 0 &&
                (this.domain(
                  "uploaddomain"
                ));
            })
            .catch(err => {});

        })
        .catch(_res => {
          this.spinShow = false;
          this.$Message.error(err.message);
        });
    },
    domain(type) {
      var domains = "";
      for (let i = 0; i < this.stateInfo.domain[type].length; i++) {
        domains += this.stateInfo.domain[type][i];
        if (i < this.stateInfo.domain[type].length - 1) {
          domains += ";";
        }
	  }
      console.log(this.stateInfo.domain,domains);
	  this.stateInfo.domain[type] = domains

    }
    // tapWebviewReset() {
    // 	this.spinShow = true;
    // 	webviewReset().then(_res=>{
    //     	this.spinShow = false;
    //         this.$Message.success("重置成功");
    //         this.getData();
    // 	}).catch(err=>{
    //     	this.spinShow = false;
    //         this.$Message.error(err.message);
    // 	})
    // }
  },
  created() {
    this.getData();
  },
  mounted() {}
};
</script>

<style scoped>
#maintenance,
#maintenance-content {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
}
/*面板块*/
.pannel-wrappe {
  width: 100%;
}
/*面板样式*/
.pannel-item {
  background: white;
  margin: 24px;
  font-size: 14px;
}
/*微信端 账户状态 面板*/
.pannel-item:first-child {
  flex: 0.4;
}
/*接口端 实时状态 面板*/
.pannel-item:last-child {
  flex: 0.6;
  margin-left: 0;
  margin-right: 20px;
}
.pannel-title {
  font-weight: bold;
  padding: 10px;
  border-bottom: 1px solid #dcdee2;
}
.pannel-content {
  padding: 20px 0;
}

.status-input {
  width: 60%;
  font-size: 14px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  background-color: #fff;
  padding: 6px 7px;
  height: 36px;
  line-height: 1.5;
  margin-right: 30px;
}
.red {
  color: red;
}
.green {
  color: green;
}
.reset-btn {
  cursor: pointer;
}
</style>

<style type="text/css">
/* .ivu-form .ivu-form-item-label {
    font-size: 14px;
} */
</style>
